<template>
    <div>

        <PageWrapper>

             <div class="mb-4">
                <CollapseContainer title="查询条件" :canExpan=true>
                    <BasicForm @register="registerQueryForm" />
                </CollapseContainer>
            </div> 
 
            <div class="bg-white overflow-hidden">
                <a-tabs type="card" v-model:activeKey="activeKey">
                    <a-tab-pane key="1" tab="未排产">
                        <BasicTable @register="registerTable" size="small" title="计划列表">
                            <template #toolbar>
                                <a-button preIcon="ant-design:plus-circle-outlined" type="primary"
                                    v-auth="'ProductionManagement.PlanManagement.Create'" @click="openCreatePlanModal">
                                    {{ t('common.createText') }}
                                </a-button>

                                <a-button preIcon="ant-design:sync-outlined" type="primary" 
                                    v-auth="'ProductionManagement.PlanManagement.Sync'" @click="syncFromErp">
                                    {{ t('routes.production.plan.sync') }}
                                </a-button>
                                <a-dropdown>
                                    <a-button preIcon="ant-design:file-excel-outlined" type="primary"
                                        v-auth="'ProductionManagement.PlanManagement.Upload'">
                                        {{ t('routes.production.plan.import') }} </a-button>
                                    <template #overlay>
                                        <a-menu>
                                            <a-menu-item>
                                                <a @click="download">{{ t('routes.production.plan.downloadTemplate') }}</a>
                                            </a-menu-item>
                                            <a-menu-item>
                                                <a @click="upload">{{ t('routes.production.plan.uploadFile') }}</a>
                                            </a-menu-item>
                                        </a-menu>
                                    </template>
                                </a-dropdown>

                            </template>

                            <template #bodyCell="{ column, record }">
                                <template v-if="column.key === 'action'">
                                    <TableAction :actions="[
                                        {
                                            icon: 'clarity:note-edit-line',
                                            label: t('common.editText'),
                                            auth: 'ProductionManagement.PlanManagement.Update',
                                            onClick: handleEdit.bind(null, record),
                                        },
                                        {
                                            icon: 'ant-design:delete-outlined',
                                            color: 'error',
                                            label: t('common.delText'),
                                            auth: 'ProductionManagement.PlanManagement.Delete',
                                            popConfirm: {
                                                title: t('common.askDelete'),
                                                placement: 'left',
                                                confirm: handleDelete.bind(null, record),
                                            },
                                        },
                                    ]" />
                                </template>

                            </template>

                        </BasicTable>
                    </a-tab-pane>
                    <a-tab-pane key="2" tab="已排产">Content of Tab Pane 2</a-tab-pane>
                    <a-tab-pane key="3" tab="进行中">Content of Tab Pane 3</a-tab-pane>
                    <a-tab-pane key="4" tab="已暂停">Content of Tab Pane 4</a-tab-pane>
                    <a-tab-pane key="5" tab="已完成">Content of Tab Pane 5</a-tab-pane>
                </a-tabs>
            </div>
        </PageWrapper>
 
        <CreatePlan @register="registerCreatePlanModal" @reload="reload" :bodyStyle="{ 'padding-top': '0' }" />
        <UpdatePlan @register="registerUpdatePlanModal" @reload="reload" :bodyStyle="{ 'padding-top': '0' }" />
 
    </div>
</template>
    
<script lang="ts">
import { Tag } from 'ant-design-vue';
import { defineComponent, ref } from 'vue';
import { BasicTable, TableAction, useTable } from '/@/components/Table';
import { tableColumns, searchFormSchema, getTableListAsync, deleteAsync } from '/@/views/production/plan/Plan';
import { useI18n } from '/@/hooks/web/useI18n';
import { useModal } from '/@/components/Modal';
import CreatePlan from './CreatePlan.vue';
import UpdatePlan from './UpdatePlan.vue';
import { BasicUpload } from '/@/components/Upload';
import { PageWrapper } from "/@/components/Page";
import { CollapseContainer } from '/@/components/Container';
import { BasicForm, type FormSchema, useForm, type FormProps } from '/@/components/Form';
// import { useTabs } from '/@/hooks/web/useTabs';
//   import { Tabs } from 'ant-design-vue';

export default defineComponent({
    name: 'Ladle',
    components: {
        BasicTable,
        TableAction,
        CreatePlan,
        UpdatePlan,
        Tag,
        BasicUpload,
        PageWrapper,
        CollapseContainer,
        BasicForm
    },
    setup() {
        const { t } = useI18n();
        const [registerCreatePlanModal, { openModal: openCreatePlanModal }] = useModal();
        const [registerUpdatePlanModal, { openModal: openUpdatePlanModal }] = useModal();

        const [registerTable, { reload }] = useTable({
            columns: tableColumns,
            // formConfig: {
            //     labelWidth: 70,
            //     schemas: searchFormSchema,
            // },
            api: getTableListAsync,
            showTableSetting: true,
            useSearchForm: false,
            bordered: true,
            canResize: true,
            showIndexColumn: true,
            immediate: true,
            scroll: { x: true },
            actionColumn: {
                width: 220,
                title: t('common.action'),
                dataIndex: 'action',
                //  slots: { customRender: 'action' },
            },
        });

        const [registerQueryForm, { setProps, setFieldsValue, updateSchema }] = useForm({
            labelWidth: 120,
            schemas:searchFormSchema ,
            actionColOptions: { offset: 8,span: 8 },
            fieldMapToTime: [['fieldTime', ['startTime', 'endTime'], 'YYYY-MM']],
        });

        const activeKey = ref('1');

        function handleEdit(record: Recordable) {
            openUpdatePlanModal(true, {
                record: record,
            });
        }

        function syncFromErp() {
            console.log('todo:对接erp')
        }

        function upload() {
            console.log('todo:上传解析excel')
        }

        function download() {
            console.log('todo:下载导入模板')
        }

        async function handleDelete(record: Recordable) {
            await deleteAsync({ id: record.id });
            await reload();
        }

        return {
            t,
            registerTable,
            reload,
            handleEdit,
            handleDelete,
            registerCreatePlanModal,
            registerUpdatePlanModal,
            openCreatePlanModal,
            syncFromErp,
            upload,
            download,
            activeKey,
            registerQueryForm
        };
    },
});
</script>
    